import React, {
    Component,
} from 'react'
import { connect } from 'react-redux';
import { View, Text, Image, StyleSheet, TouchableOpacity } from 'react-native'
import { Px } from '../utils'
import { AssetImages } from '../constants';

class NavigationHeader extends Component {

    static propTypes = {

    };

    // 生命周期
    constructor(props) {
        super(props)
        this.state = {

        }
    }

    // render part
    render() {
        const { leftButton, rightButton, bgColor = null, style } = this.props

        return (
            <View style={[{alignItems: 'center' }, style]}>
                <View
                    style={{ flexDirection: 'row', height: Px(90), width: '100%', paddingHorizontal: 10, alignItems:'center' }}>
                    <View style={{flex: 4}}>
                        {this._renderLeftButton()}
                    </View>
                    {this._renderTitle()}
                    <View style={{ flex: 4}}>
                        {rightButton}
                    </View>
                    
                </View>

            </View>
        )
    }

    _renderTitle() {
        const { title = '', children } = this.props
        if (title == '') {
            return children
        }
        return (
            <View style={{ flex: 13, justifyContent: 'center', alignItems: 'center' }}>
                <Text style={{ color: '#000', fontSize: Px(36) }}>{title}</Text>
            </View>
        )
    }

    _renderLeftButton() {
        const { leftButton = null, leftButtonShow = true } = this.props;
        if (leftButton == null && leftButtonShow) {
            return (
                <TouchableOpacity
                    onPress={() => {
                        if (this.props.navigation) {
                            this.props.navigation.goBack()
                        }
                    }}
                >
                    <Image
                        style={{
                            width: Px(50),
                            height: Px(50)
                        }}
                        source={AssetImages.BACK}
                    />
                </TouchableOpacity>
            )
        }
        return leftButton
    }

    _renderRightButton() {
        const { rightButton } = this.props
        return (
            <View style={{ flex: 2  }}>
                {rightButton}
            </View>
        )
    }
}

const styles = StyleSheet.create({

})

export default connect(state => ({

})
)(NavigationHeader)